<template>
	<view>
		<view class="jjhhbnjhet">

		</view>
		<view class="pr pd pt30">
			<textarea class="kjnnjxser" value="" placeholder="请输入您要反馈的问题(5-500字以内）" v-model="postdata.content"/>

			<view class="mt20 pd kjjnjkxeert">
				<view class="pt20 pm20 fz30 z3">
					请提供您要反馈问题的截图（选填）
				</view>
				<view class="pt20 pm20 dertwerte">
					<view class="jkknnkxeert" v-for="(sd,idx) in shnghasd">
						<image :src="sd" class="w100 h100"></image>
						<icon type="clear" color="red" class="kkjjnxert" size="20" @tap="closeing(idx)"></icon>
					</view>
					<view class="jkknnkxeert" @tap="upimg">
						<image src="../../../static/img/addiconsss.png" class="innbbnxeert"></image>
					</view>
					
				</view>
			</view>
			
			<view class="mt20 pd kjjnjkxeert">
				<view class="pt20 pm20 fz30 z3">
					请提供您的联系方式（选填）
				</view>
				<view class="pt20 pm20 sertywwer">
					<input type="text" value="" placeholder="手机号或者邮箱"  class="w100 fz32" v-model="postdata.tel"/>
				</view>
			</view>
			<view class="fz24 z9 pt30">
				为了后期有了处理结果能方便告知您，请预留您的联系方式。
			</view>
			
			<button type="default" class="mt100 dbtn cf fz36" @tap="yjfkbtn">提交</button>
			
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				shnghasd:[],
				postdata:{
					content:"",
					imgs:'',
					tel:""
				}
			}
        },
        components: {},
        methods: {
			upimg(){
				let th=this
				uni.chooseImage({
					success(e) {
						th.shnghasd.push(e.tempFilePaths[0])
					}
				})
			},
			closeing(idx){
				this.shnghasd.splice(idx,1)
			},
			yjfkbtn(){
				if(this.postdata.content.length <5){
					uni.showToast({
						title:"反馈内容请输入五个字以上",
						icon:"none"
					})
					return
				}
				uni.setStorageSync('feedback',this.postdata)
				uni.showToast({
					title:"您的反馈已收到，感谢您的支持",
					icon:"none"
				})
				uni.navigateBack({
					delta:1
				})
			}
		},
        mounted() {}
    }

</script>
<style  scoped>
	.jjhhbnjhet{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 1;
	}
	.kjnnjxser{
		height:290upx;
		background:rgba(245,241,241,1);
		border-radius:12upx;
		width: 100%;
		font-size: 32upx;
		padding: 20upx;
	}
	.kjjnjkxeert{
		background:rgba(245,241,241,1);
		border-radius:12upx;
	}
	.dertwerte{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20upx;
		grid-row-gap: 20upx;
	}
	.sertywwer{
		padding-top: 40upx;
		padding-bottom: 40upx;
			border-top: 1px solid #E3E3E3;
	}
	.jkknnkxeert{
		background:rgba(229,229,229,1);
		height: 140upx;
		text-align: center;
		line-height: 140upx;
		position: relative;
	}
	.kkjjnxert{
		position: absolute;
		right: -20upx;
		top: -60upx;
	}
	.innbbnxeert{
		width: 40upx;
		height: 40upx;
	}
</style>
